<template>
	<view>
		<van-tabs sticky @change="handleChange" nav-class="tabClass"  color="blue" title-active-color="blue" title-inactive-color="black" swipeable :active="current">
		  <van-tab  name="全部" title="全部">
			 
		  </van-tab>
		  <van-tab name="待付款" title="待付款">
			  <!-- <view class="tab-contain" v-if="showPage">
				  <block v-if="dataList[1].length>0">
				    <Item @refresh="refresh" @goCancelOrder="goCancelOrder" @goConfirmOrder="goConfirmOrder" @goDetail=goOrderDetail :dataArr="dataList[1]"></Item>
				  </block>
				   <view v-else class="nodata"><u-empty  mode="order"></u-empty></view>
			  </view> -->
		  </van-tab>
		  <van-tab name="待发货" title="待发货">
			 <!-- <view class="tab-contain" v-if="showPage">
				   <block v-if="dataList[2].length>0">
				      <Item @refresh="refresh" @goCancelOrder="goCancelOrder" @goConfirmOrder="goConfirmOrder" @goDetail=goOrderDetail :dataArr="dataList[2]"></Item>
				  </block>
				   <view v-else class="nodata"><u-empty  mode="order"></u-empty></view>
			  </view> -->
		  </van-tab>
		  <van-tab name="待收货" title="待收货">
			  <!-- <view class="tab-contain" v-if="showPage">
				   <block v-if="dataList[3].length>0">
				      <Item @refresh="refresh" @goCancelOrder="goCancelOrder" @goConfirmOrder="goConfirmOrder" @goDetail=goOrderDetail :dataArr="dataList[3]"></Item>
				  </block>
				  <view v-else class="nodata"><u-empty  mode="order"></u-empty></view>
			  </view> -->
		  </van-tab>
		  <van-tab name="已完成" title="已完成">
			 <!-- <view class="tab-contain" v-if="showPage">
				  <block v-if="dataList[4].length>0">
				      <Item @refresh="refresh" @goCancelOrder="goCancelOrder" @goConfirmOrder="goConfirmOrder" @goDetail=goOrderDetail :dataArr="dataList[4]"></Item>
				  </block>
				  <view v-else class="nodata"><u-empty  mode="order"></u-empty></view>
			  </view> -->
		  </van-tab>
		</van-tabs>
		<view class="tab-contain" v-if="showPage">
						  <block v-if="allList.length>0">
						  <Item @refresh="refresh" @goCancelOrder="goCancelOrder" @goConfirmOrder="goConfirmOrder" @goDetail=goOrderDetail  :dataArr="allList"></Item>
						  </block>
						  <view v-else class="nodata"><u-empty  mode="order"></u-empty></view>
			<u-loadmore v-if="allList.length>=5&&current=='全部'" icon-type="flower":status="status" />
		</view>
		
	</view>
</template>

<script>
	import api from '../../untils/api.js'
	import Item from "../../components/order-list-item";
	export default {
		data() {
			return {
				current:"全部",
				dataList:[],
				allList:[],
				showPage:false,
				startIndex:0,
				pageCount:10,
				endIndex:0,
				page:0,
				status: 'loadmore',
			}
		},
		components: {
		    Item,
		  },
		  onShow() {
		  	this.init();
		  },
		onLoad(e) {
			this.current=e.name
		},
		  onPullDownRefresh() {
		    this.init();
			setTimeout(()=>{uni.stopPullDownRefresh();},1000)
		  },
		  onReachBottom(){
		  	if(this.current=="全部") {
		  		 this.status = 'loading';
				 console.log(this.page);
				 let allCount= Math.floor(this.dataList[6].length/this.pageCount);
				 const remainder=this.dataList[6].length%this.pageCount;
				 if((this.page>allCount)){
					setTimeout(()=>{this.status = 'nomore';},3000)
					 throw false;
				 };
				if(this.page===allCount){
					if(remainder===0){
						setTimeout(()=>{this.status = 'nomore';this.page++;},1000)
					}
					else {
						setTimeout(()=>{
							var list=this.dataList[6].slice(this.startIndex);
							this.allList=this.allList.concat(list);
							this.page++
							this.status = 'nomore';},1000)
					}
				} 
				else {
					setTimeout(()=>{
						var list=this.dataList[6].slice(this.startIndex,this.endIndex);
						this.allList=this.allList.concat(list);
						this.startIndex=this.endIndex;
						this.endIndex=this.endIndex+this.pageCount;
						this.page++
					},1000);
				}	
		  	}  
		 }, 
		methods: {  
			handleChange(e){
				this.current=e.detail.name
				this.page=0;
				this.swich();
			},
			refresh(){
				this.init();
			},
		 async	init(){
		 		this.showPage=false;
				uni.showLoading({
					title:"加载中"
				});
				this.page=0;
				var obj={nowPage: 1, pageSize: 9999, startRecord: 0, parameters: {}, condition: {oredCriteria: [[]]}}
			  await	api.SM_ORDER_LIST(JSON.stringify(obj)).then((res)=>{
										   this.orderList=res.data.body.exhibitDatas;
										   this.dataList=[[], [], [], [], [], [], [], []];
										   for (const index of this.orderList) {
										             this.dataList[6].push(index); // 全部订单
										             switch (index.state) {
										               case 0:
										                 this.dataList[0].push(index);
										                 break; // 已取消
										               case 1:
										                 this.dataList[1].push(index);
										                 break; // 未付款
										               case 2:
										                 this.dataList[1].push(index);
										                 break; // 未付款
										               case 3:
										                 this.dataList[2].push(index);
										                 break; // 待发货
										               case 4:
										                 this.dataList[3].push(index);
										                 break; // 已发货
										               case 5:
										                 this.dataList[4].push(index);
										                 break; // 已完成
										               case 6:
										                 this.dataList[4].push(index);
										                 break; // 已完成
										             }
										        }
				          })
				 this.swich();
				 this.showPage=true;
				 uni.hideLoading();
			},
			swich(){
				switch (this.current){
					case "待付款":
					 this.allList=this.dataList[1]
						break;
					case "待发货":
					 this.allList=this.dataList[2]
						break;
					case "待收货":
					 this.allList=this.dataList[3]
						break;
					case "已完成":
					 this.allList=this.dataList[4]
						break;
					default:
				   this.allList=this.dataList[6].slice(0,this.pageCount);
				   this.startIndex=this.pageCount;
				   this.endIndex=this.startIndex+this.pageCount;
				   this.page++;
						break;
				}
			},
			goCancelOrder(data){
				uni.navigateTo({
					url: `../cancleOrder/cancleOrder?orderId=${data.id}&needPay=${data.needPay}`
				})
			},
			goConfirmOrder(data){
				uni.navigateTo({
					url:`../confirmOrder/confirmOrder?list=${JSON.stringify(data.list)}&orderFrom=${data.orderFrom}`
				})
			},
			goOrderDetail(id){
				uni.navigateTo({
					url: `../orderDetail/orderDetail?id=${id}`
				})
			}
		}
	}
</script>

<style>
	.nodata{
		width: 100vw;
		height: 80vh;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.tab-contain{
		width: 100vw;
		height: 90vh;
		box-sizing: border-box;
	}
    .tabClass{
		font-weight: 600;
		font-size: 30rpx;
		background: rgb(246,248,250);
	}
</style>
